<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>包装线OEE</title>
    <link rel="stylesheet" type="text/css" href="/static/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css">
    <link rel="stylesheet" type="text/css" href="/static/css/demo.css">
    <script src="/static/css/jquery.min.js" type="text/javascript"></script>
    <script src="/static/css/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/static/css/DataRequest.js" type="text/javascript"></script>
    <#include "../common-header.html"/>
    <meta charset="utf-8" />
	<style type="text/css">
		.cleft_cont{
			display: flex;
			height: 46%;
		}
		.titnum1,.titnum2,.titnum3,.titnum4{
			text-align: center;
			font-size: 14px;
			color:#333333;
		}
		.tbox-tit{
			font-weight: bold;
		}
		/*.cBox{
			width: 55%;
			height: 55%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border: 1px solid #b3b3b3;
			padding: 20px;
			margin: 37px 20px 20px 20px;
		}*/
		.tbox{
			width: 44%;
			border: 1px solid #ccc;
			padding: 20px;
			margin-left: 2px;
		}
		.pBox{
			width: 55%;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #ccc;
		}
		.pBox .contbox{
			width: 22.2%;

		}
		.cleft_cont_main{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 55%;
		}
		tspan{
			font-size: 12px;
		}
		.cleft{width: 100%;height: 100%;}
		.cright{width: 35%;height: 100%;}
		.cright .rt{
			width: 100%;height: 50%;
			display: flex;
		}
		.cright .rb{flex: 1;
			width: 100%;height: 50%;background: blue;
		}
		.cright .rt .ctop{
			height: 100%;
			background: #ff6600;
			flex: 1;
		}
		.tbox-tit2{
			ont-size: 16px;
			font-weight: bold;
			margin: 10px auto;
			width: 180px;
			position: absolute;
			margin-bottom: 10px;
			left: 3%;
			z-index: 99;
		}
		.cright .rt .cbot{
			flex: 1;
			height: 100%;
			background: #ff0066;
		}
		.equip_item_tb{
			width: 190px;
			height: 120px;
			border: 1px solid #96b8e6;
			border-collapse: collapse;
			margin: 10px;
		}
		#equipView > tr{
			height:261px;
		}
	</style>
</head>
<body class="easyui-layout" data-options="fit:true">
	<div id="cc" class="easyui-layout" style="width:100%;height:100%;display: flex;clear: both;">
		<!--左边-->
		<div class="cleft">
			<div class="cleft_cont">
				<div class="tbox-tit2">仪表盘</div>
				<div class="pBox">
<!--					<table class="layui-table" id="listTable" lay-filter="listTable"></table>-->
					<div class="contbox">
						<div id="container1" style="height: 200px;!important;" class="gaur"></div>
						<div class="titnum1"></div>
					</div>
					<div class="contbox">
						<div id="container2"  style="height: 200px;!important;" class="gaur"></div>
						<div class="titnum2"></div>
					</div>
					<div class="contbox">
						<div id="container3"  style="height: 200px;!important;" class="gaur"></div>
						<div class="titnum3"></div>
					</div>
					<div class="contbox">
						<div id="container4"  style="height: 200px;!important;" class="gaur"></div>
						<div class="titnum4"></div>
					</div>
				</div>
				<div class="tbox">
					<div class="tbox-tit"> <span class="tit"></span>当班产量监视</div>
					<table class="layui-table" id="listTable" lay-filter="listTable"></table>
				</div>
			</div>

			<!--柱状图-->
			<div id="container" style="min-width:400px;height:93%;border: 1px solid #ccc;padding: 2px 2px 0 0;"></div>
		</div>
	</div>


	<script type="text/javascript">
		// 柱状图
		var chart = Highcharts.chart('container',{
			chart: {
				type: 'column'
			},
			title: {
				text: '七天OEE数据/产量达成统计',
				align: 'left',
				fill:'#000000'
			},
			credits:{
				enabled : false
			},
			subtitle: {
				text: ''
			},
			xAxis: {
				categories: [],
				crosshair: true
			},
			yAxis: {
				labels: {
					formatter: function () {
						return this.value + '%';
					}
				}
			},
			tooltip: {
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					borderWidth: 0
				}
			},
			series: [{
				name: '实际产量',
				data: []
			},{
				name: 'OEE数据',
				data: []
			}]
		}, function (chart) {
			if (!chart.renderer.forExport) {
				var d2,d3,d4;
				var number = 1;// 1第一次直接执行请求 第二执行定时器
				var getChart0= function(){
					$.ajax({
						url: '/report/reportException/selectPlan7',
						type: "POST",
						data: {},
						success: function (res) {
							var datatime=[],oee=[],num=[],plan=[];
							var reD = JSON.parse(res);
							reD.map(function(item){
								datatime.push(item.d);
								var OE = (Number(item.equipOEE)*100);
								let OE2 = Math.round(OE);
								oee.push(OE2);
								// oee.push(Number(item.equipOEE)*100);
								num.push(Math.round(Number(item.Num)*100));
							})
							// 多个柱状-这里请求接口  给d1,d2,d3赋值即可更新柱状数据
							//	d1 = plan;
							d2 = num;
							d3 = oee;
							d4 = datatime;
						}
					});
					chart.update({
						series: [{
							type: 'column',
							name: '实际产量',
							data: d2
						},{
							type: 'column',
							name: 'OEE数据',
							data: d3
						}],
						xAxis: {
							// categories: [
							// 	'2021-08-25','2021-08-26','2021-08-27','2021-08-28','2021-08-29','2021-08-30','2021-08-31'
							// ],
							categories: d4,
							crosshair: true
						},
						yAxis: {
							labels: {
								formatter: function () {
									return this.value + '%';
								}
							}
						}
					});
				};
				console.log('number1',number);
				if(number ==1 ){
				   number++;
				   var clearTime =  setInterval(function () {
					   getChart0();
				   },1000);
			   }else{
					clearInterval(clearTime);
				   setInterval(function () {
					   getChart0();
				   },600000);
			   }
			}
		});

		//仪表盘1
		var chart1 = Highcharts.chart('container1',{
			chart: {
				type: 'gauge',
				plotBackgroundColor: null,
				plotBackgroundImage: null,
				plotBorderWidth: 0,
				plotShadow: false
			},
			title: {
				text: 'OEE(整体效率)'
			},
			credits:{
				enabled : false
			},
			pane: {
				startAngle: -150,
				endAngle: 150,
				background: [{
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#FFF'],
							[1, '#333']
						]
					},
					borderWidth: 0,
					outerRadius: '109%'
				}, {
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#333'],
							[1, '#FFF']
						]
					},
					borderWidth: 1,
					outerRadius: '107%'
				}, {
					// default background
				}, {
					backgroundColor: '#DDD',
					borderWidth: 0,
					outerRadius: '105%',
					innerRadius: '103%'
				}]
			},
			// the value axis
			yAxis: {
				min: 0,
				max: 100,
				minorTickInterval: 'auto',
				minorTickWidth: 1,
				minorTickLength: 10,
				minorTickPosition: 'inside',
				minorTickColor: '#666',
				tickPixelInterval: 30,
				tickWidth: 2,
				tickPosition: 'inside',
				tickLength: 10,
				tickColor: '#666',
				labels: {
					step: 2,
					rotation: 'auto'
				},
				title: {
					text: 'OEE'
				},
				plotBands: [{
					from: 0,
					to: 60,
					color: '#55BF3B' // green
				}, {
					from: 60,
					to: 80,
					color: '#DDDF0D' // yellow
				}, {
					from: 80,
					to: 100,
					color: '#DF5353' // red
				}]
			},
			series: [{
				name: 'Speed',
				data: [0],
				tooltip: {
					valueSuffix: ' km/h'
				}
			}]
		}, function (chart1) {
			if (!chart1.renderer.forExport) {
				var newVal1 = [],numnew1;
				$.ajax({
					url: '/report/reportException/selectOEE',
					type: "POST",
					data: {},
					success: function (data) {
						var datas1 = JSON.parse(data);
						var num1= Number(datas1.equipOEE);
						numnew1 = (num1*100).toFixed(0);
						var point1 = chart1.series[0].points[0];
						$(".titnum1").html(numnew1+'%')
						// 仪表盘这里从接口拿数据  给newVal赋值即可
						newVal1.push(numnew1);
						point1.update(newVal1);
					}
				})
				setInterval(function () {
					var newVal1 = [],numnew1;
					$.ajax({
						url: '/report/reportException/selectOEE',
						type: "POST",
						data: {},
						success: function (data) {
							var datas1 = JSON.parse(data);
							var num1= Number(datas1.equipOEE);
							numnew1 = (num1*100).toFixed(0);
							var point1 = chart1.series[0].points[0];
							$(".titnum1").html(numnew1+'%');
							// 仪表盘这里从接口拿数据  给newVal赋值即可
							newVal1.push(numnew1);
							point1.update(newVal1);
						}
					})
				}, 600000);
			}
		});
		//仪表盘2
		var chart2 = Highcharts.chart('container2',{
			chart: {
				type: 'gauge',
				plotBackgroundColor: null,
				plotBackgroundImage: null,
				plotBorderWidth: 0,
				plotShadow: false
			},
			title: {
				text: 'Ar(时间开动率)'
			},
			credits:{
				enabled : false
			},
			pane: {
				startAngle: -150,
				endAngle: 150,
				background: [{
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#FFF'],
							[1, '#333']
						]
					},
					borderWidth: 0,
					outerRadius: '109%'
				}, {
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#333'],
							[1, '#FFF']
						]
					},
					borderWidth: 1,
					outerRadius: '107%'
				}, {
					// default background
				}, {
					backgroundColor: '#DDD',
					borderWidth: 0,
					outerRadius: '105%',
					innerRadius: '103%'
				}]
			},
			// the value axis
			yAxis: {
				min: 0,
				max: 100,
				minorTickInterval: 'auto',
				minorTickWidth: 1,
				minorTickLength: 10,
				minorTickPosition: 'inside',
				minorTickColor: '#666',
				tickPixelInterval: 30,
				tickWidth: 2,
				tickPosition: 'inside',
				tickLength: 10,
				tickColor: '#666',
				labels: {
					step: 2,
					rotation: 'auto'
				},
				title: {
					text: 'AR'
				},
				plotBands: [{
					from: 0,
					to: 60,
					color: '#55BF3B' // green
				}, {
					from: 60,
					to: 80,
					color: '#DDDF0D' // yellow
				}, {
					from: 80,
					to: 100,
					color: '#DF5353' // red
				}]
			},
			series: [{
				name: 'Speed',
				data: [0],
				tooltip: {
					valueSuffix: 'Ar'
				}
			}]
		}, function (chart2) {
			if (!chart.renderer.forExport) {
				var newVal2 = [],numnew2;
				$.ajax({
					url: '/report/reportException/selectTimeOEEList',
					type: "POST",
					data: {},
					success: function (data) {
						var datas2 = JSON.parse(data);
						var num2 = Number(datas2.formatTimeOEE);
						numnew2 = (num2*100).toFixed(0);
						$(".titnum2").html(numnew2+'%');
						var point2 = chart2.series[0].points[0];
						// 仪表盘这里从接口拿数据  给newVal赋值即可
						newVal2.push(numnew2);
						point2.update(newVal2);
					}
				})
				setInterval(function () {
					var newVal2 = [],numnew2;
					$.ajax({
						url: '/report/reportException/selectTimeOEEList',
						type: "POST",
						data: {},
						success: function (data) {
							var datas2 = JSON.parse(data);
							var num2 = Number(datas2.formatTimeOEE);
							 numnew2 = (num2*100).toFixed(0);
							var point2 = chart2.series[0].points[0];
							$(".titnum2").html(numnew2+'%');
							// 仪表盘这里从接口拿数据  给newVal赋值即可
							newVal2.push(numnew2);
							point2.update(newVal2);
						}
					})
				}, 600000);
			}
		});


		//仪表盘3
		var chart3 = Highcharts.chart('container3',{
			chart: {
				type: 'gauge',
				plotBackgroundColor: null,
				plotBackgroundImage: null,
				plotBorderWidth: 0,
				plotShadow: false
			},
			title: {
				text: 'Pr(性能开动率)'
			},
			credits:{
				enabled : false
			},
			pane: {
				startAngle: -150,
				endAngle: 150,
				background: [{
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#FFF'],
							[1, '#333']
						]
					},
					borderWidth: 0,
					outerRadius: '109%'
				}, {
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#333'],
							[1, '#FFF']
						]
					},
					borderWidth: 1,
					outerRadius: '107%'
				}, {
					// default background
				}, {
					backgroundColor: '#DDD',
					borderWidth: 0,
					outerRadius: '105%',
					innerRadius: '103%'
				}]
			},
			// the value axis
			yAxis: {
				min: 0,
				max: 100,
				minorTickInterval: 'auto',
				minorTickWidth: 1,
				minorTickLength: 10,
				minorTickPosition: 'inside',
				minorTickColor: '#666',
				tickPixelInterval: 30,
				tickWidth: 2,
				tickPosition: 'inside',
				tickLength: 10,
				tickColor: '#666',
				labels: {
					step: 2,
					rotation: 'auto'
				},
				title: {
					text: 'Pr'
				},
				plotBands: [{
					from: 0,
					to: 60,
					color: '#55BF3B' // green
				}, {
					from: 60,
					to: 80,
					color: '#DDDF0D' // yellow
				}, {
					from: 80,
					to: 100,
					color: '#DF5353' // red
				}]
			},
			series: [{
				name: 'Speed',
				 data: [0],
				//data: chart3Data,
				tooltip: {
					valueSuffix: ' km/h'
				}
			}]
		}, function (chart3) {
			if (!chart.renderer.forExport) {
				var newVal3 = [],numnew3;
				$.ajax({
					url: '/report/reportException/selectPerformanceOEE',
					type: "POST",
					data: {},
					success: function (data) {
						var datas3 = JSON.parse(data);
						var num3 = Number(datas3.formatTimeOEE);
						numnew3 = (num3*100).toFixed(0);
						var point3 = chart3.series[0].points[0];
						$(".titnum3").html(numnew3+'%');
						// 仪表盘这里从接口拿数据  给newVal赋值即可
						newVal3.push(numnew3);
						point3.update(newVal3);
					}
				})
				setInterval(function () {
					var newVal3 = [],numnew3;
					$.ajax({
						url: '/report/reportException/selectPerformanceOEE',
						type: "POST",
						data: {},
						success: function (data) {
							var datas3 = JSON.parse(data);
							var num3 = Number(datas3.formatTimeOEE);
							numnew3 = (num3*100).toFixed(0);
							var point3 = chart3.series[0].points[0];
							$(".titnum3").html(numnew3+'%');
							// 仪表盘这里从接口拿数据  给newVal赋值即可
							newVal3.push(numnew3);
							point3.update(newVal3);
						}
					})
				}, 600000);

			}
		});
        //仪表盘4
		var chart4 = Highcharts.chart('container4',{
			chart: {
				type: 'gauge',
				plotBackgroundColor: null,
				plotBackgroundImage: null,
				plotBorderWidth: 0,
				plotShadow: false
			},
			title: {
				text: 'Qr(合格品率)'
			},
			credits:{
				enabled : false
			},
			pane: {
				startAngle: -150,
				endAngle: 150,
				background: [{
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#FFF'],
							[1, '#333']
						]
					},
					borderWidth: 0,
					outerRadius: '109%'
				}, {
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
						stops: [
							[0, '#333'],
							[1, '#FFF']
						]
					},
					borderWidth: 1,
					outerRadius: '107%'
				}, {
					// default background
				}, {
					backgroundColor: '#DDD',
					borderWidth: 0,
					outerRadius: '105%',
					innerRadius: '103%'
				}]
			},
			// the value axis
			yAxis: {
				min: 0,
				max: 100,
				minorTickInterval: 'auto',
				minorTickWidth: 1,
				minorTickLength: 10,
				minorTickPosition: 'inside',
				minorTickColor: '#666',
				tickPixelInterval: 30,
				tickWidth: 2,
				tickPosition: 'inside',
				tickLength: 10,
				tickColor: '#666',
				labels: {
					step: 2,
					rotation: 'auto'
				},
				title: {
					text: 'Qr'
				},
				plotBands: [{
					from: 0,
					to: 40,
					color: '#55BF3B' // green
				}, {
					from: 40,
					to: 70,
					color: '#DDDF0D' // yellow
				}, {
					from: 70,
					to: 100,
					color: '#DF5353' // red
				}]
			},
			series: [{
				name: 'Speed',
				data: [0],
				tooltip: {
					valueSuffix: ' km/h'
				}
			}]
		}, function (chart4) {
			if (!chart.renderer.forExport) {
				var newVal4 = [],numnew4;
				$.ajax({
					url: '/report/reportException/selectOKNumOEE',
					type: "POST",
					data: {},
					success: function (data) {
						var datas4 = JSON.parse(data);
						var num4 = Number(datas4.oKNumOEE);
						var numnew4 = (num4*100).toFixed(0);
						var point4 = chart4.series[0].points[0];
						$(".titnum4").html(numnew4+'%');
						// 仪表盘这里从接口拿数据  给newVal赋值即可
						newVal4.push(numnew4);
						point4.update(newVal4);
					}
				})
				setInterval(function () {
					var newVal4 = [],numnew4;
					$.ajax({
						url: '/report/reportException/selectOKNumOEE',
						type: "POST",
						data: {},
						success: function (data) {
							var datas4 = JSON.parse(data);
							var num4 = Number(datas4.oKNumOEE);
							var numnew4 = (num4*100).toFixed(0);
							var point4 = chart4.series[0].points[0];
							$(".titnum4").html(numnew4+'%');
							// 仪表盘这里从接口拿数据  给newVal赋值即可
							newVal4.push(numnew4);
							point4.update(newVal4);
						}
					})
				}, 600000);
			}
		});
	</script>

	<!--当班产量监控-->
	<script type="text/javascript">
		var lanType = ${lanType};
		layui.config({
			base: '/static/plugins/layui/base/',
			v: new Date().getTime()
		}).use([ 'form','table','laydate','layuiconfig','layuiformajax','layuitable'], function(){
			var form = layui.form, $ = layui.jquery, table = layui.table,  laydate = layui.laydate,
					layer = layui.layer,  layuitable = layui.layuitable,layuiconfig = layui.layuiconfig;
			var layuiformajax = layui.layuiformajax;
			var cols = [];
			function InitColItem(item){
				var curlanType;
				var colName;
				switch(lanType){
					case 1:
						curlanType='lanCn'
						break;
					case 2:
						curlanType='lanTw'
						break;
					case 3:
						curlanType='lanEn'
						break;
					case 4:
						curlanType='lanJa'
						break;
					default:
						curlanType='lanCn'
				}
				this.field = item.keyName;
				this.title = item[curlanType];
				this.align = 'center';
				this.width = '200';
			};
			function initDataGrid(cols){
				table.render({
					elem: '#listTable'
					,id:'listTable'
					,height: 300 //容器高度
					,width:780
					,url:'/report/reportException/selectPlan',
					page: {
						layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
						,limit:30 //一页显示多少条
						,limits:[30,60,90]//每页条数的选择项
						,groups: 2 //只显示 2 个连续页码
						,first: false //不显示首页
						,last: false //不显示尾页
						,curr: 1
					},
					cols : [
						cols
					],
					parseData: function(res){ //res 即为原始返回的数据
						var result;
						if(this.page.curr){
							result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
						}
						else{
							result=res.data.slice(0,this.limit);
						}
						var newresult =[];
						result.map(function(item){
							newresult.push({
								LAY_TABLE_INDEX: item.LAY_TABLE_INDEX,
								bc: item.bc,
								num: item.num,
								rate:item.rate+'%',
								plan:4600
							})
						})
						return {
							"code": res.resultCode, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.total, //解析数据长度
							"data": newresult  //解析数据列表
						};
					},
					done : function(res,curr,limit) {

						// table = res.data;
						// return res.data
					}
				});
			}

			$.ajax({
				url:'/report/reportException/selectSampleLetterOEE',
				type:"POST",
				data:{},
				success:function(data){
					var callBackData = JSON.parse(data).list;
					// console.log('callBackData',callBackData);
					$.each(callBackData,function(i,item){
						var curColOption = new InitColItem(item);
						if(item.keyName == 'report_NumberCount_rate_coloEE'){
							curColOption.field = 'rate'
							curColOption.width=150
						}
						if(item.keyName == 'report_NumberCount_num_coloEE'){
							curColOption.field = 'num'
							curColOption.width=150
						}
						if(item.keyName == 'report_NumberCount_plan_coloEE'){
							curColOption.field = 'plan'
							curColOption.width=150
						}
						if(item.keyName == 'report_NumberCount_bc_coloEE'){
							curColOption.field = 'bc'
							curColOption.width=300
						}
						cols.push(curColOption);
					});
					initDataGrid(cols);
				}
			});
		});
	</script>
	<script type="text/javascript">
		$(function() {
			function show() {
				var mydate = new Date();
				var str = "" + mydate.getFullYear() + "年";
				str += (mydate.getMonth() + 1) + "月";
				str += mydate.getDate() + "日";
				return str;
			}
			$(".tit").html(show());
		});
	</script>
</body>
</html>
